import audioUrl from '../assets/audio/ajl.mp3'
import axios from 'axios'
import { gradient } from '../global/utils'

const btn = document.querySelector('button');
const lis = document.querySelectorAll('ul>li');
let playFlag = false
let fileReader = new FileReader();
let AudioContext = window.AudioContext;


let colorLists = [
    ['#6fe9a6', '#6eeff9'],
    ['#ec98a6', '#ea8d6b'],
    ['#f2e58a', '#f1c984'],
    ['#f1c984', '#f1c0d2'],
    ['#f1c0d2', '#a7eadc'],
]

let AnalyserNode: any, audioBufferSourceNode: any
// https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext
// AudioContext 表示由链接在一起的音频模块构建的音频处理图
// AudioContext.close() 关闭一个音频环境，释放任何正在使用系统资源的音频。
// AudioContext.resume()   恢复之前被暂停的音频上下文中的时间进程。
// AudioContext.suspend()   暂停音频上下文中的时间进程，暂停音频硬件访问并减少进程中的 CPU/电池使用。
var audioContext = new AudioContext();//实例化

btn?.setAttribute('disabled', 'disabled')
const getBlob = (): Promise<Blob> => {
    return new Promise((resolve, reject) => {
        axios({
            method: 'GET',
            // 请求文件必须修改请求类型，否则请求到的二进制无效
            responseType: 'blob',
            url: audioUrl
        }).then((res) => {
            // 通过请求的二进制生成blob类型文件
            console.log('res.data',res.data);
            
            const blob = new Blob([res.data], { type: 'audio/mpeg' })
            resolve(blob)
        })
    })
}

let colorIndex = 0
// 绘制音波
const draw = () => {
    requestAnimationFrame(() => draw());
    if (!playFlag) return
    if (+new Date % 1000 <= 10) {
        const colors = colorLists[colorIndex]
        if (colors) {
            changeColor(colors[0], colors[1])
            colorIndex++
        } else {
            colorIndex = 0
            const colors = colorLists[colorIndex]
            changeColor(colors[0], colors[1])
        }
    }
    // 文件信息
    var bufferLength = AnalyserNode.frequencyBinCount;
    var dataArray = new Uint8Array(bufferLength);

    for (var i = 0; i < bufferLength; i++) {
        let barHeight = dataArray[i];
        AnalyserNode.getByteFrequencyData(dataArray);
        const liDiv = document.querySelector(`li:nth-of-type(${i}) > div`) as any
        const liDivDiv = document.querySelector(`li:nth-of-type(${i}) > div > div`) as any

        if (liDiv) {
            const height: number = Number(`${barHeight / 100 * Math.pow(8, barHeight / 100 - 0.7)}`)
            liDiv.style.height = `${height}px`
            liDivDiv.style.height = `${height * 0.7}px`
            const color = liDivDiv?.getAttribute('shadowColor')
            liDivDiv.style.boxShadow = `0px ${Math.min(height * 0.7,30)}px 10px ${color}, 0px ${Math.max(-height * 0.7,-30)}px 10px ${color}`
        }
    }
}

// 加载完毕解码
const fileRenderOnload = (e: any) => {
    // 异步解码音频文件中的 ArrayBuffer
    audioContext.decodeAudioData(e.target.result, function (buffer) {
        // 加载完毕
        btn?.removeAttribute('disabled')
        // https://developer.mozilla.org/zh-CN/docs/Web/API/AnalyserNode/webaudiofft.png
        // 创建一个AnalyserNode
        AnalyserNode = audioContext.createAnalyser();
        // 创建一个新AudioBufferSourceNode接口
        audioBufferSourceNode = audioContext.createBufferSource();
        // 范围[32, 32768]
        // AnalyserNode 接口的 fftSize 属性的值是一个无符号长整型的值，表示（信号）样本的窗口大小。
        // 当执行快速傅里叶变换（Fast Fourier Transfor (FFT)）时，这些（信号）样本被用来获取频域数据。
        // fftSize 属性的值必须是从 32 到 32768 范围内的 2 的非零幂; 其默认值为 2048.
        AnalyserNode.fftSize = 512; // 数值越大，消耗资源越多，越慢
        console.log('buffer',buffer)
        audioBufferSourceNode.buffer = buffer;
        draw()
    })
}


// 加载音频
const loadAudio = async function () {
    if (audioContext.state == 'running') {
        audioContext.close();
        audioContext = new AudioContext();
    }

    // 请求音频文件
    const audioBlob = await getBlob()

    // FileReader 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容
    fileReader.readAsArrayBuffer(audioBlob);
    // 文件加载完成后调用
    fileReader.onload = fileRenderOnload
}
window.onload = loadAudio


const changeColor = (color1: string, color2: string) => {
    let colorList = gradient(color1, color2, lis.length);

    for (let i = 1; i <= lis.length; i++) {
        const color = colorList[i]
        let div = document.querySelector(`li:nth-of-type(${i}) > div`)
        let divDiv1 = document.querySelector(`li:nth-of-type(${i}) > div > div:nth-of-type(1)`)
        if (div) {
            div.style.background = color
            // 只改变颜色
            divDiv1.style.boxShadow = `0px 0px 0px ${color}, 0px 0px 0px ${color}`
            divDiv1?.setAttribute('shadowColor', color)

        }
    }
}

if (btn) {
    btn.onclick = () => {
        // 将音频链接到Node，可以听到音频
        audioBufferSourceNode.connect(AnalyserNode);
        AnalyserNode.connect(audioContext.destination);

        // 创建的node开始播放
        audioBufferSourceNode.start();
        playFlag = true
        changeColor('#6fe9a6', '#6eeff9')
    }
}

